<template>
    <div class="CAReviews">
      <el-container>
      <el-main>
          <el-table :data="tableData" border fit stripe highlight-current-row style="width: 100%;">
            <el-table-column label="动态内容" align="center" min-width="180">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.talk }}</span>
              </template>
            </el-table-column>
            <el-table-column label="作者" align="center" width="180">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.userName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-row :gutter="24" justify="center" align="middle">
                  <el-col :span="8">
                    <el-switch
                      v-model="scope.row.type2"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      @change="commitChange(scope.row)">
                    </el-switch>
                  </el-col>
                  <el-col :span="8">
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button
                    size="mini"
                    @click="goCommit(scope.$index, scope.row)">进入讨论</el-button>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer>
          <el-pagination background layout="prev, pager, next" :total="total" :current-page.sync="currentPage" @current-change="currentChange"></el-pagination>
        </el-footer>
    </el-container>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getList, deleteCommit, editCommit } from '@/api/CAReviews'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
   data() {
      return {
        tableData: [],
        currentPage: 1,
        dialogFormVisible: false,
        dialogFormVisibleImport: false,
        form: {
          musicName: '',
          singer: '',
        },
        formLabelWidth: '120px',
        total: 0,
        fileList: [],
        flag: true,
      }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
      this.form.musicName = row.musicName;
      this.form.singer = row.singer;
    },
    handleDelete(index, row) {
      console.log(index, row);
      deleteCommit(row).then(res => {
        this.GetList();
        this.$message({
          message: '恭喜你，删除成功',
          type: 'success'
        });
      })
    },
    currentChange() {
      console.log(this.currentPage);
      this.GetList();
    },
    GetList() {
      getList({ currentNum: this.currentPage, pageSize: 10}).then(res => {
        console.log(res);
        const tableData = res.result.list;
        this.tableData = tableData.map(item => {
          item["type2"] = item.type==1 ? false : true;
          return item;
        })
        this.total = res.result.count;
      })
    },
    commitChange(item) {
      console.log(item);
      item.type = item.type2 ? 2 : 1;
      editCommit(item).then(res => {
        this.GetList();
        this.$message({
          message: '恭喜你，修改成功',
          type: 'success'
        });
      })
    },
    goCommit(index, row) {
      this.$router.push({
        name: "Comment",
        query: {
          id: row.id,
        }
      })
    }
  },
  created() {
    this.GetList();
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
